<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title>图书管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f8f9fa;
            height: 100vh;
            overflow: hidden;
        }
        
        .app-container {
            height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        .header {
            background: #3880ff;
            color: white;
            padding: 12px 16px;
            text-align: center;
            font-size: 18px;
            font-weight: 600;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .content {
            flex: 1;
            overflow-y: auto;
            padding-bottom: 60px;
        }
        
        .tab-content {
            display: none;
            padding: 16px;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .search-bar {
            background: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 12px 16px;
            margin-bottom: 16px;
            font-size: 16px;
            width: 100%;
        }
        
        .category-tabs {
            display: flex;
            background: white;
            border-radius: 8px;
            margin-bottom: 16px;
            overflow: hidden;
        }
        
        .category-tab {
            flex: 1;
            padding: 12px 8px;
            text-align: center;
            background: white;
            border: none;
            cursor: pointer;
            font-size: 14px;
            color: #666;
        }
        
        .category-tab.active {
            background: #3880ff;
            color: white;
        }
        
        .book-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 12px;
        }
        
        .book-card {
            background: white;
            border-radius: 8px;
            padding: 12px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            cursor: pointer;
            transition: transform 0.2s;
        }
        
        .book-card:hover {
            transform: translateY(-2px);
        }
        
        .book-image {
            width: 100%;
            height: 100px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 12px;
            margin-bottom: 8px;
        }
        
        .book-title {
            font-weight: 600;
            font-size: 14px;
            margin-bottom: 4px;
            color: #333;
        }
        
        .book-author {
            font-size: 12px;
            color: #666;
        }
        
        .profile-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 24px;
            text-align: center;
            margin: -16px -16px 16px -16px;
        }
        
        .user-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: rgba(255,255,255,0.2);
            margin: 0 auto 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            margin-bottom: 24px;
        }
        
        .stat-item {
            text-align: center;
            background: white;
            padding: 16px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .stat-number {
            font-size: 24px;
            font-weight: 600;
            color: #3880ff;
            margin-bottom: 4px;
        }
        
        .stat-label {
            font-size: 12px;
            color: #666;
        }
        
        .menu-list {
            background: white;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .menu-item {
            display: flex;
            align-items: center;
            padding: 16px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            transition: background 0.2s;
        }
        
        .menu-item:last-child {
            border-bottom: none;
        }
        
        .menu-item:hover {
            background: #f8f9fa;
        }
        
        .menu-icon {
            width: 20px;
            height: 20px;
            margin-right: 12px;
            color: #666;
        }
        
        .borrow-card {
            background: white;
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 12px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .borrow-title {
            font-weight: 600;
            font-size: 16px;
            margin-bottom: 8px;
            color: #333;
        }
        
        .borrow-info {
            font-size: 14px;
            color: #666;
            margin-bottom: 4px;
        }
        
        .return-btn {
            background: #3880ff;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            font-size: 12px;
            cursor: pointer;
            margin-top: 8px;
        }
        
        .bottom-tabs {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            display: flex;
            border-top: 1px solid #ddd;
            height: 60px;
        }
        
        .tab-button {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: none;
            border: none;
            cursor: pointer;
            color: #666;
            font-size: 10px;
            transition: color 0.2s;
        }
        
        .tab-button.active {
            color: #3880ff;
        }
        
        .tab-icon {
            font-size: 20px;
            margin-bottom: 2px;
        }
        
        .debug-info {
            position: fixed;
            top: 10px;
            right: 10px;
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 8px;
            border-radius: 4px;
            font-size: 10px;
            z-index: 1000;
            max-width: 150px;
        }
    </style>
</head>

<body>
    <div id="debug" class="debug-info">
        状态: 加载中...
    </div>

    <div class="app-container">
        <div class="header" id="header-title">图书管理</div>
        
        <div class="content">
            <!-- 首页 -->
            <div id="home" class="tab-content active">
                <input type="text" class="search-bar" placeholder="搜索图书..." />
                
                <div class="category-tabs">
                    <button class="category-tab active" onclick="filterBooks('all')">全部</button>
                    <button class="category-tab" onclick="filterBooks('literature')">文学</button>
                    <button class="category-tab" onclick="filterBooks('science')">科学</button>
                    <button class="category-tab" onclick="filterBooks('history')">历史</button>
                </div>
                
                <div class="book-grid" id="book-grid">
                    <div class="book-card" data-category="literature">
                        <div class="book-image">红楼梦</div>
                        <div class="book-title">红楼梦</div>
                        <div class="book-author">曹雪芹</div>
                    </div>
                    
                    <div class="book-card" data-category="literature">
                        <div class="book-image">西游记</div>
                        <div class="book-title">西游记</div>
                        <div class="book-author">吴承恩</div>
                    </div>
                    
                    <div class="book-card" data-category="science">
                        <div class="book-image">时间简史</div>
                        <div class="book-title">时间简史</div>
                        <div class="book-author">霍金</div>
                    </div>
                    
                    <div class="book-card" data-category="history">
                        <div class="book-image">史记</div>
                        <div class="book-title">史记</div>
                        <div class="book-author">司马迁</div>
                    </div>
                    
                    <div class="book-card" data-category="literature">
                        <div class="book-image">三国演义</div>
                        <div class="book-title">三国演义</div>
                        <div class="book-author">罗贯中</div>
                    </div>
                    
                    <div class="book-card" data-category="science">
                        <div class="book-image">相对论</div>
                        <div class="book-title">相对论</div>
                        <div class="book-author">爱因斯坦</div>
                    </div>
                </div>
            </div>
            
            <!-- 借阅页面 -->
            <div id="borrow" class="tab-content">
                <div class="borrow-card">
                    <div class="borrow-title">红楼梦</div>
                    <div class="borrow-info">作者: 曹雪芹</div>
                    <div class="borrow-info">借阅日期: 2024-01-15</div>
                    <div class="borrow-info">应还日期: 2024-02-15</div>
                    <button class="return-btn">归还图书</button>
                </div>
                
                <div class="borrow-card">
                    <div class="borrow-title">时间简史</div>
                    <div class="borrow-info">作者: 霍金</div>
                    <div class="borrow-info">借阅日期: 2024-01-20</div>
                    <div class="borrow-info">应还日期: 2024-02-20</div>
                    <button class="return-btn">归还图书</button>
                </div>
            </div>
            
            <!-- 个人中心 -->
            <div id="profile" class="tab-content">
                <div class="profile-header">
                    <div class="user-avatar">👤</div>
                    <h2>张三</h2>
                    <p>学号: 2021001</p>
                </div>
                
                <div class="stats-grid">
                    <div class="stat-item">
                        <div class="stat-number">5</div>
                        <div class="stat-label">已借阅</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">12</div>
                        <div class="stat-label">收藏</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">8</div>
                        <div class="stat-label">评论</div>
                    </div>
                </div>
                
                <div class="menu-list">
                    <div class="menu-item">
                        <div class="menu-icon">⚙️</div>
                        <span>设置</span>
                    </div>
                    <div class="menu-item">
                        <div class="menu-icon">🔑</div>
                        <span>修改密码</span>
                    </div>
                    <div class="menu-item">
                        <div class="menu-icon">📱</div>
                        <span>修改手机号</span>
                    </div>
                    <div class="menu-item">
                        <div class="menu-icon">🚪</div>
                        <span>退出登录</span>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="bottom-tabs">
            <button class="tab-button active" onclick="switchTab('home')">
                <div class="tab-icon">🏠</div>
                <div>首页</div>
            </button>
            <button class="tab-button" onclick="switchTab('borrow')">
                <div class="tab-icon">📚</div>
                <div>借阅</div>
            </button>
            <button class="tab-button" onclick="switchTab('profile')">
                <div class="tab-icon">👤</div>
                <div>我的</div>
            </button>
        </div>
    </div>

    <script>
        function updateDebug(message) {
            const debug = document.getElementById('debug');
            if (debug) {
                debug.textContent = '状态: ' + message;
            }
            console.log('Debug:', message);
        }
        
        function switchTab(tabName) {
            updateDebug('切换到 ' + tabName);
            
            // 隐藏所有内容
            document.querySelectorAll('.tab-content').forEach(content => {
                content.classList.remove('active');
            });
            
            // 显示选中的内容
            document.getElementById(tabName).classList.add('active');
            
            // 更新标签按钮状态
            document.querySelectorAll('.tab-button').forEach(btn => {
                btn.classList.remove('active');
            });
            event.target.closest('.tab-button').classList.add('active');
            
            // 更新标题
            const titles = {
                'home': '图书管理',
                'borrow': '我的借阅',
                'profile': '个人中心'
            };
            document.getElementById('header-title').textContent = titles[tabName];
        }
        
        function filterBooks(category) {
            updateDebug('筛选分类: ' + category);
            
            // 更新分类按钮状态
            document.querySelectorAll('.category-tab').forEach(tab => {
                tab.classList.remove('active');
            });
            event.target.classList.add('active');
            
            // 显示/隐藏图书
            document.querySelectorAll('.book-card').forEach(card => {
                if (category === 'all' || card.dataset.category === category) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            });
        }
        
        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            updateDebug('页面加载完成');
            
            // 添加图书点击事件
            document.querySelectorAll('.book-card').forEach(card => {
                card.addEventListener('click', function() {
                    const title = this.querySelector('.book-title').textContent;
                    updateDebug('点击图书: ' + title);
                    alert('查看图书详情: ' + title);
                });
            });
            
            // 添加归还按钮事件
            document.querySelectorAll('.return-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const title = this.closest('.borrow-card').querySelector('.borrow-title').textContent;
                    updateDebug('归还图书: ' + title);
                    alert('归还图书: ' + title);
                });
            });
            
            // 添加菜单项点击事件
            document.querySelectorAll('.menu-item').forEach(item => {
                item.addEventListener('click', function() {
                    const text = this.textContent.trim();
                    updateDebug('点击菜单: ' + text);
                    alert('功能: ' + text);
                });
            });
            
            updateDebug('应用初始化完成');
            
            // 3秒后隐藏调试信息
            setTimeout(() => {
                const debug = document.getElementById('debug');
                if (debug) {
                    debug.style.display = 'none';
                }
            }, 3000);
        });
        
        // 全局错误处理
        window.addEventListener('error', function(e) {
            updateDebug('错误: ' + e.message);
        });
        
        updateDebug('脚本加载完成');
    </script>
</body>
</html>